
<script>
import { useVModel } from '@vueuse/core'
import { provide } from 'vue'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props, { emit }) {
    //接收v-model的值
    const activeName = useVModel(props, 'modelValue', emit)

    //点击选项卡触发的函数
    const tabClick = (name, index) => {
      activeName.value = name
      emit('tab-click', { name, index })
    }


    provide('activeName', activeName)

    return {
      activeName,
      tabClick
    }
  },
  render() {
    //获取默认插槽节点
    const items = this.$slots.default()

    //动静态panels集合组件
    const dynamicPanels = []
    items.forEach(item => {
      //静态（单个组件渲染的）
      if (item.type.name === 'XtxTabsPanel') {
        dynamicPanels.push(item)
      } else {
        //v-for渲染的
        item.children.forEach(item => {
          dynamicPanels.push(item)
        })
      }
    })

    //选项卡的结构
    const nav = <nav>
      {dynamicPanels.map((item, index) => {
        return <a onClick={() => this.tabClick(item.props.name, index)} class={{ active: item.props.name === this.modelValue }} href="javascript:;">{item.props.label}</a>
      })}
    </nav>
    //内容容器
    // const content = <div>
    //   <div>内容1</div>
    //   <div>内容2</div>
    //   <div>内容3</div>
    // </div>


    return <div class='xtx-tabs'>{[nav, dynamicPanels]}</div>
  }
}
</script>

<style lang='less' scoped>
.xtx-tabs {
  background: #fff;

  >nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    >a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;

      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>